<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Configuration ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // --- Circuit Coordinates ---
        const x1 = 100, y1 = 100;
        const x2 = 450, y2 = 300;
        const midX = (x1 + x2) / 2;
        const midY = (y1 + y2) / 2;

        // --- Draw Wires ---
        ctx.beginPath();

        // Component geometries
        const capX = midX, capHalfWidth = 15;
        const resX = midX, resHalfWidth = 40; // width=80
        const switchY = midY, switchHalfGap = 15;

        // Top wire segments
        ctx.moveTo(x1, y1);
        ctx.lineTo(capX - capHalfWidth, y1);
        ctx.moveTo(capX + capHalfWidth, y1);
        ctx.lineTo(x2, y1);

        // Right wire
        ctx.lineTo(x2, y2);

        // Bottom wire segments
        ctx.lineTo(resX + resHalfWidth, y2);
        ctx.moveTo(resX - resHalfWidth, y2);
        ctx.lineTo(x1, y2);

        // Left wire segments
        ctx.lineTo(x1, switchY + switchHalfGap);
        ctx.moveTo(x1, switchY - switchHalfGap);
        ctx.lineTo(x1, y1);

        // Render all wire paths
        ctx.stroke();

        // --- Draw Components ---
        // Capacitor
        ctx.beginPath();
        const capPlateDist = 5;
        const capPlateLen = 40;
        ctx.moveTo(capX - capPlateDist, y1 - capPlateLen / 2);
        ctx.lineTo(capX - capPlateDist, y1 + capPlateLen / 2);
        ctx.moveTo(capX + capPlateDist, y1 - capPlateLen / 2);
        ctx.lineTo(capX + capPlateDist, y1 + capPlateLen / 2);
        ctx.stroke();

        // Resistor Box
        const resHeight = 25;
        ctx.strokeRect(resX - resHalfWidth, y2 - resHeight / 2, resHalfWidth * 2, resHeight);

        // Switch Arm
        ctx.beginPath();
        const switchHingeY = switchY - switchHalfGap;
        ctx.moveTo(x1, switchHingeY);
        ctx.lineTo(x1 - 40, switchHingeY - 20);
        ctx.stroke();

        // --- Labels & Caption ---
        ctx.font = '28px sans-serif';
        ctx.textAlign = 'center';
        
        // Label 'C'
        ctx.textBaseline = 'bottom';
        ctx.fillText('C', capX, y1 - capPlateLen / 2 - 10);
        
        // Label 'R'
        ctx.textBaseline = 'top';
        ctx.fillText('R', resX, y2 + resHeight / 2 + 10);

        // Caption
        ctx.font = 'bold 28px sans-serif';
        ctx.textBaseline = 'alphabetic';
        ctx.fillText('Fig. 6.1', midX, y2 + 80);

    </script>
</body>
</html>